<template>
  <div id="tGoodsDetail">
    <x-header :left-options="{backText: ''}">商品详情</x-header>
    <div class="headBanner">
      <img :src="data.goods_img" alt="">
      <div class="headTitle">
        <p>{{data.goods_name}}</p>
        <p>{{data.goods_summary}}</p>
      </div>
    </div>
    <div class="waybill">
      <ul>
        <li>
          <div class="waybillSame">
            <span><img src="http://img.zanjl.com/Content/img/image/zengdan.png" alt=""></span>
            <p>原始货单数量：{{monadData.falsereceivenum}}</p>
<!--            <i @click="$toastText('此货单需要解封')"><img src="../../assets/img/wenhao.png" alt=""></i>-->
          </div>
          <div class="waybillSame">
            <span><img src="http://img.zanjl.com/Content/img/image/jiefeng.png" alt=""></span>
            <p>解封货单数量：{{truereceivenum}}</p>
          </div>
        </li>
        <li>
          <div class="waybillSame">
            <span><img src="http://img.zanjl.com/Content/img/image/zengdan1.png" alt=""></span>
            <p>奖励货单数量：{{monadData.falserewardnum}}</p>
            <div class="edit_btn1">
              <button class="def_btn1" @click="receive()">领取商品</button>
            </div>
          </div>
          <div class="waybillSame">
            <span><img src="http://img.zanjl.com/Content/img/image/jiefeng.png" alt=""></span>
            <p>解封货单数量：{{monadData.truerewardnum}}</p>
            <div class="edit_btn1">
              <button class="def_btn1" @click="jumpTo({path:'/p2pinvite', query: {id: $route.params.id}})">分享好友</button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="shareNum">
      <h2>分享人数</h2>
      <ul>
        <li v-for="(item, index) in sharedata" :key="index">
          <div class="headImg">
            <img :src="item.head_img || userHead" alt="">
          </div>
          <p style="width: 1.5rem;">{{item.true_name}}</p>
          <p>{{item.user_name}}</p>
          <p>{{item.reg_time | formatDate()}}</p>
        </li>
      </ul>
    </div>
    <div class="edit_btn">
      <button class="def_btn" @click="jumpTo({path: '/p2pbillingdetails', query: {id: $route.params.id}})">进入操作</button>
    </div>
  </div>
</template>

<script>
import { XHeader } from 'vux'
import { mapState, mapMutations } from 'vuex'
import { SET_LOADING } from '@store/type'
import { getP2PGoodsDetail, getLoadGoods, p2pReceive, getP2PUserPositions, updateP2PUserPositions, getUserRelationship, getuserRelationshipcount } from '../../api'
import { formatDate } from '../../filters/date.js'

export default {
  // 转换时间格式
  filters: {
    formatDate (time) {
      var dtime = time.slice(6, 19)
      var date = new Date(parseInt(dtime))
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  components: {
    XHeader
  },
  computed: {
    ...mapState(['user'])
  },
  data () {
    return {
      data: {},
      monadData: {},
      truereceivenum: '',
      sharedata: {},
      shareCount: '',
      userHead: 'http://img.zanjl.com/Content/img/image/user_head.png'
    }
  },
  created () {
    this.loadGoods()
    this.loadReceive()
    this.selectuserdata()
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    // 加载商品基本信息
    async loadGoods () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      let res = await getP2PGoodsDetail(this.$route.params.id)
      this.setLoading(false)
      if (res && res.code === 200) {
        this.data = res.data
      }
    },
    // 领取奖励单
    async receive () {
      let form = new FormData()
      form.append('record_user_id', this.user.user_id)
      form.append('record_goods_id', this.$route.params.id)
      let res = await p2pReceive(form)
      if (res && res.code === 200) {
        this.$toastText('您已成功领取！')
      }
    },
    // 获取用户当前奖励单信息
    async loadReceive () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      let form = new FormData()
      form.append('record_user_id', this.user.user_id)
      form.append('record_goods_id', this.$route.params.id)
      let res = await getLoadGoods(form)
      this.setLoading(false)
      if (res && res.code === 200) {
        this.monadData = res.data
        if (res.data.truereceivenum > res.data.falsereceivenum) {
          this.truereceivenum = res.data.falsereceivenum // 领取单数--解封
        } else {
          this.truereceivenum = res.data.truereceivenum // 领取单数--解封
        }
      }

      let formuser = new FormData()
      formuser.append('position_goods_id', this.$route.params.id)
      formuser.append('position_user_id', this.user.user_id)
      // 验证当前用户是否存在持仓信息 如果没有，新建持仓信息
      let p2puserpositions = await getP2PUserPositions(formuser)
      if (p2puserpositions && p2puserpositions.code === 200) {
        if (p2puserpositions.data === null) {
          var countnum = this.truereceivenum + this.monadData.truerewardnum
          formuser.append('position_goods_num', countnum)
          formuser.append('Unblock', this.truereceivenum)
          formuser.append('Undeblocked', this.monadData.falsereceivenum)
          formuser.append('rewardUnblock', this.monadData.truerewardnum)
          formuser.append('rewardUndeblock', this.monadData.falserewardnum)
          var upuserposition = await updateP2PUserPositions(formuser)
          if (upuserposition) {

          }
        }
      }
    },
    // 获取分享用户信息
    async selectuserdata () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      let form = new FormData()
      form.append('invite_code', this.user.invite_code)
      form.append('goodsid', this.$route.params.id)
      let res = await getUserRelationship(form)
      this.setLoading(false)
      if (res && res.code === 200) {
        this.sharedata = res.data
      }
      let rescount = await getuserRelationshipcount(form)
      if (rescount && rescount.code === 200) {
        this.shareCount = rescount.data
      }
    }
  },
  mounted () {
  },
  activated () {
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/pub";

#tGoodsDetail{
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-bottom: 1.25rem;
  /deep/ .vux-header {
    background: rgba(255,255,255,1);
    position: absolute;
    width: 100%;
    .vux-header-title{
      color: #333;
    }
    .vux-header-left .left-arrow:before {
      border-width: .0125rem 0 0 .0125rem;
      border-color: #333;
    }
  }
  .headBanner{
    padding-top: 1.25rem;
    width: 100%;
    height: 8rem;
    position: relative;
    img{
      width: 100%;
      height: 100%;
    }
    .headTitle{
      width: 8.86665rem;
      height: 1.41334rem;
      background: rgba(255,255,255,1);
      border-radius: .375rem;
      padding: .25rem .3rem;
      position: absolute;
      left: 50%;
      top: 90%;
      transform: translateX(-50%);
      p{
        font-size: .34rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: rgba(0,0,0,1);
        line-height: .4375rem;
      }
    }
  }
  .waybill{
    padding-top: .5rem;
    ul{
      li{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        width: 9.46rem;
        background:rgba(255,255,255,1);
        border-radius: .125rem;
        margin: 0 auto .25rem;
        .waybillSame{
          width: 50%;
          display: inline-block;
          text-align: center;
          padding: .4rem;
          span{
            display: inline-block;
            width: .5rem;
            height: .5rem;
            vertical-align: middle;
            img{
              width: 100%;
              height: 100%;
            }
          }
          p{
            display: inline-block;
            font-size: .275rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: rgba(102,102,102,1);
            line-height: .45rem;
            vertical-align: middle;
            margin: 0 .125rem;
          }
          .downBor{
            border-bottom: 1px solid rgba(102,102,102,1);
          }
          i{
            display: inline-block;
            width: .375rem;
            height: .375rem;
            vertical-align: middle;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .edit_btn1{
            width: 100%;
            padding: 0 .2rem;
            margin-top: .3rem;
            .def_btn1{
              width: 100%;
              height: .7rem;
              background: rgba(255,204,0,1);
              border: none;
              font-size: .375rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: rgba(255,255,255,1);
              line-height: .4375rem;
              text-align: center;
              border-radius: .1rem;
            }
          }
        }
      }
    }
  }
  .shareNum{
    width: 9.46rem;
    background: rgba(255,255,255,1);
    border-radius: .125rem;
    margin: auto;
    padding: .4rem;
    h2{
      font-size: .4rem;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: rgba(0,0,0,1);
      line-height: .4375rem;
      text-align: center;
      padding-bottom: .25rem;
    }
    ul{
      padding: 0 1rem;
      li{
        border-bottom: 1px solid rgba(232,232,232,1);
        padding: .125rem 0;
        .headImg{
          width: .825rem;
          height: .825rem;
          border-radius:50%;
          display: inline-block;
          vertical-align: middle;
          img{
            width: 100%;
            height: 100%;
          }
        }
        p{
          display: inline-block;
          font-size: .25rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: rgba(0,0,0,1);
          line-height: .4375rem;
          vertical-align: middle;
        }
      }
    }
  }
  .edit_btn{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    .def_btn{
      width: 100%;
      height: 1.25rem;
      background: rgba(255,204,0,1);
      border: none;
      font-size: .46rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #333333;
      line-height: .4375rem;
      text-align: center;
    }
  }
}
</style>
